//这是权限管理视图，用于管理系统用户的权限。<template>
    <div>
      <el-button type="primary" @click="openAddDialog">添加权限</el-button>
      <el-table :data="permissions" style="width: 100%">
        <el-table-column prop="id" label="ID" width="50"></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button size="mini" @click="openEditDialog(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="deletePermission(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <el-dialog title="添加权限" :visible.sync="addDialogVisible">
        <el-input v-model="newPermission.name" placeholder="权限名称"></el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addPermission">确定</el-button>
        </span>
      </el-dialog>
  
      <el-dialog title="编辑权限" :visible.sync="editDialogVisible">
        <el-input v-model="editPermissionData.name" placeholder="权限名称"></el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="updatePermission">确定</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    data() {
      return {
        permissions: [],
        addDialogVisible: false,
        editDialogVisible: false,
        newPermission: { name: '' },
        editPermissionData: { id: '', name: '' }
      };
    },
    created() {
      this.fetchPermissions();
    },
    methods: {
      fetchPermissions() {
        axios.get('/api/permissions').then(response => {
          this.permissions = response.data;
        });
      },
      openAddDialog() {
        this.addDialogVisible = true;
        this.newPermission = { name: '' };
      },
      addPermission() {
        axios.post('/api/permissions', this.newPermission).then(() => {
          this.fetchPermissions();
          this.addDialogVisible = false;
        });
      },
      openEditDialog(permission) {
        this.editDialogVisible = true;
        this.editPermissionData = { ...permission };
      },
      updatePermission() {
        axios.put(`/api/permissions/${this.editPermissionData.id}`, this.editPermissionData).then(() => {
          this.fetchPermissions();
          this.editDialogVisible = false;
        });
      },
      deletePermission(id) {
        axios.delete(`/api/permissions/${id}`).then(() => {
          this.fetchPermissions();
        });
      }
    }
  };
  </script>
  